
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var data = [{
            id: 1,
            title: "titl1"
        }, {
            id: 2,
            title: "titl2"
        }, {
            id: 3,
            title: "titl3"
        }, {
            id: 4,
            title: "titl4"
        }, {
            id: 5,
            title: "titl5"
        }]

        function render(data) {
            if (document.getElementsByTagName('ul').length != 0) {
                document.getElementsByTagName('ul').item(0).remove()
            }

            var ul = document.createElement('ul');

            for (var i = 0; i < data.length; i++) {
                var li = document.createElement('li'),
                    span = document.createElement('span'),
                    b = document.createElement('b'),



                    spanData = document.createTextNode(data[i].title),

                    bData = document.createTextNode('删除'),
                    bAttr = document.createAttribute('data-id');



                bAttr.value = data[i].id;
                b.setAttributeNode(bAttr);

                b.appendChild(bData);
                span.appendChild(spanData);

                li.appendChild(span);
                li.appendChild(b);
                ul.appendChild(li);
            }

            document.body.appendChild(ul);


            var aB = document.getElementsByTagName('b');

            for (let i = 0; i < aB.length; i++) {
                aB.item(i).onclick = function (e) {
                    deleteTitle(e.target.dataset.id);
                }
            }
        }

        render(data);


        function deleteTitle(id) {
            data = data.filter(function (item) {
                return item.id != id;
            })
            render(data);
        }


    </script>
</body>

</html>